<script setup lang="ts">
import headcontent from './components/head/index.vue';
import menucompents from './components/menucompents/index.vue';
import {ref} from 'vue'
const   collapse= ref(true)
const MENU_MINIMIZE = 10
const MENU_MAXIMIZE = 20
const leftmenuWidth= collapse.value?ref<number>(MENU_MINIMIZE):ref<number>(MENU_MAXIMIZE)
      const showAllMenu= (val:boolean)=>{
        console.log("val:"+val);
        console.log("old collapse:"+collapse.value);
        if(collapse.value==true){
          collapse.value =false
          leftmenuWidth.value=MENU_MAXIMIZE
        }else{
          collapse.value =true
          leftmenuWidth.value=MENU_MINIMIZE
        }
        console.log(" new collapse:"+collapse.value);
      }

</script>

<template >
  <el-container>
    <el-header>
      <headcontent></headcontent>
    </el-header>
    <el-container>
      <el-aside  :width="leftmenuWidth+'vw'" class="mian-left-menu">
        <el-row class="mian-el-row">
          <el-col :span="24">
          <el-switch
            :model-value="collapse"
            inline-prompt
            class="mt-2"
            size="small"
            active-text="折叠"
            inactive-text="展开" 
            :style="{marginLeft:(collapse?'12px':'30px')}"  
            :active-value="true" 
            :inactive-value="false"     
            @change="showAllMenu(collapse)"
          />
          
         
            <!-- <el-link @click="showAllMenu()"   :underline="false" class="mian-left-menu-button">
              <el-icon v-if="!isCollapse"><ArrowLeft /></el-icon>
              <el-icon v-if="isCollapse"><ArrowRight /></el-icon>
            </el-link> -->
            <menucompents :isCollapse="collapse"/>
          </el-col>
        </el-row>
      </el-aside>
      <el-main>
        <router-view></router-view>

      </el-main>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
.mian-left-menu{
  min-height: 92vh;
  overflow: hidden;
  .mian-el-row{
    height:92vh;
    overflow: hidden;
    position: relative;
  
  }
}
</style>
